<template>
    <div class="menu_tag_container">
        <div class="lefts" 
            :class="{'disabled':startX==0}"
            v-if="isScroll" 
            @click.stop="leftHandle"
        >
            <img src="../assets/tag/left.png" class="mwh">
        </div>
        <div 
            class="rights" 
            v-if="isScroll"
            :class="{'disabled':disabled}"
            @click.stop="rightHandle"
        >
            <img src="../assets/tag/right.png" class="mwh">
        </div>
        <div class="xwarp" ref="menuBox">
            <ul 
                class="menuTabs"
                ref="menuList"
                :style="{minWidth:sum+'px'}"
            >
                <li 
                    v-for="(tag, index) in visitedViews"
                    :key="index"
                    :class="{'active':$route.path==tag.path}"
                >
                    <router-link 
                        tag="div"
                        class="tab"
                        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
                    >
                        <span>{{tag.meta.name}}</span>
                        <div class="close" v-if="!isAffix(tag)">
                            <span class="el-icon-close" @click.stop.prevent="closeSelectedTag(tag)"></span>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import path from 'path'
import debounce from '@/mixins/debounce'
export default {
    data(){
        return{
            affixTags:[],
            isScroll:false,
            sum:130,
            startX:0,
            dVal:80,
            disabled:false
        }
    },
    computed:{
        visitedViews(){
            return this.$store.state.view.visitedViews
        },
        routes(){
            return this.$store.state.login.menuRoutes
        }
    },
    mixins:[debounce],
    watch:{
        $route(){
            this.addTags()
        }
    },
    mounted(){
        this.initTags()
        this.addTags()
    },
    methods:{
        isActive(route) {
            return route.path === this.$route.path
        },
        isAffix(tag) {
            return tag.meta && tag.meta.affix
        },
        initTags(){
            this.getFilterAffixTags(this.routes[0].children)
            for(const tag of this.affixTags){
                if(Object.keys(tag).length){
                    this.$store.dispatch('view/addVisitedView', tag)
                }
            }
            let self = this
            this.$nextTick(()=>{
                self.resizeHandle()
                self.getTabsWidth()
            })
        },
        getFilterAffixTags(routesArr, basePath="/"){
            let self = this
            routesArr.forEach((route, index)=>{
                if(route.affix){
                    const tagPath = path.resolve(basePath, route.path);
                    self.affixTags.push({
                        fullPath:tagPath,
                        path:tagPath,
                        meta:{...route.meta}
                    })
                }
                if(route.children&&route.children.length){
                    self.getFilterAffixTags(route.children, route.path)
                }
            })
        },
        addTags(){
            if(this.$route.meta.name){
                this.$store.dispatch('view/addView', this.$route)
            } 
            return false
        },
        goTagMenu(tag){
            if(tag.fullPath==this.$route.fullPath) return 
            
            this.$router.push({
                path:tag.fullPath
            })
        },
        closeSelectedTag(view){
            this.$store.dispatch('view/delView', view).then(({visitedViews})=>{
                if (this.isActive(view)) {
                    this.toLastView(visitedViews, view)
                }
            }) 
        },
        toLastView(visitedViews, view){
            const latestView = visitedViews.slice(-1)[0]
            if(latestView){
                this.$router.push(latestView.fullPath)
            }else{
                this.$router.push('/')
            }
        },
        getTabsWidth(){
            let box = this.$refs.menuBox.getBoundingClientRect()
            
            let sum = 0
            let self = this
            this.visitedViews.forEach((item, index)=>{
                sum += item.meta.name.length*15+18*2
                if(index<self.visitedViews.length-1) sum += 10
            })

            if( box.width >= sum ) this.isScroll = false
            else this.isScroll = true

            this.width = box.width
            this.sum = sum
            this.dVal = 4*15+2*18+10
        },
        leftHandle(){
            if(this.startX==0) return
            this.startX-=1
            this.$refs.menuList.style.left = '-'+this.startX*this.dVal+'px'
            this.disabled = false
        },
        rightHandle(){
            if((this.startX*this.dVal+this.width)>=(this.sum)) return 
            this.startX+=1
            this.$refs.menuList.style.left = '-'+this.startX*this.dVal+'px'
            let nowlength = this.startX*this.dVal+this.width
            if(nowlength>this.sum) this.disabled=true
            else this.disabled=false
        },
        debounceEvents(){
            if(this.visitedViews.length == 1) return 
            this.rebackPosition()
            this.getTabsWidth()
        },
        rebackPosition(){
            if( this.startX == 0 ) return
            else{
                this.startX = 0
                this.disabled = false
                this.$refs.menuList.style.left = '0px'
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.menu_tag_container{
    width: 100%;
    height: 50px;
    padding: 0 20px;
    position: relative;
    border-bottom: 1px solid #ccc;
    .lefts, .rights{
        position: absolute;
        width: 20px;
        top: 15px;
        bottom: 15px;
        z-index: 5;
        cursor: pointer;
        opacity: 0.7;
        &:hover{
            opacity: 1;
        }
        &.disabled{
            cursor: default;
            opacity: 0.3;
            pointer-events: none;
            &:hover{
                opacity: 0.3;
            }
        }
    }
    .lefts{left:0}
    .rights{right:0}
    .xwarp{
        overflow: hidden;
        padding:4px 0 6px;
    }
    .menuTabs{
        // height: 100%;
        transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
        position: absolute;
        left: 0px;
        li{
            height: 100%;
            float: left;
            cursor: pointer;
            margin-right: 10px;
            user-select: none;
            &:last-child{margin: 0}
            &:hover{
                .close{
                    display: inline-block;
                }
                .tab{
                    color: #1890ff;
                }
            }
            &.active{
                border-bottom: 1px solid #1890ff;
                .tab{
                    color: #1890ff;
                }
            }
            .tab{
                padding: 5px 18px 0;
                font-size: 15px;
                height: 100%;
                line-height: 30px;
                position: relative;
                color: rgba(0,0,0,0.65);
                position: relative;
            }
            .close{
                position: absolute;
                right: 1px;
                top: 0;
                width: 14px;
                height: 100%;
                line-height: 41px;
                color: rgba(0,0,0,0.65);
                font-size: 14px;
                display: none;
            }
        }
    }
}
</style>